<template>
  <div class="user-profile">
    <div class=" clearfix">

    </div>
    <el-container>
      <el-header style="height: 160px;padding-top: 30px;">
        <pan-thumb :image="avatar" style="float: left">
          您的身份:
          <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
        </pan-thumb>
      </el-header>
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <div>
            <span class="label">账号</span>
            <span class="value">{{ userInfo.username }}</span>
          </div>
          <div>
            <span class="label">用户名称</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div>
            <span class="label">手机号</span>
            <span class="value">{{ userInfo.phone }}</span>
          </div>
          <div>
            <span class="label">性别</span>
            <span class="value">{{ userInfo.sex == 1 ? '男' : '女' }}</span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>其他信息</span>
          </div>
          <div>
            <span class="label">身份证</span>
            <span class="value">{{ userInfo.number }}</span>
          </div>
          <div>
            <span class="label">注册时间</span>
            <span class="value">{{ userInfo.createTime }}</span>
          </div>
          <div>
            <span class="label">个人描述</span>
            <span class="value">{{ userInfo.introduction }}</span>
          </div>
          <div>
            <span class="label">用户状态</span>
            <span class="value">启用</span>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
export default {
  components: { PanThumb },
  data() {
    return {
      emptyGif: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
    };
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'userInfo',
    ])
  },
  mounted() {
    // 在这里你可以从后端API获取用户信息，并更新data中的对应字段  
  }
};  
</script>

<style scoped>
.user-profile {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.user-name {
  font-size: 20px;
  margin-left: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.label {
  display: inline-block;
  width: 100px;
}

.value {
  margin-left: 20px;
}
</style>